<template>
  <div class="listPage">
    <!-- 添加按钮 -->
    <el-button type="primary" @click="handleAdd()">添加设备</el-button>

    <!-- 表格 -->
    <el-table :data="classroomEquipment" style="width: 100%">
      <el-table-column prop="classroomEquipmentId" label="设备ID" width="100"></el-table-column>
      <el-table-column prop="classroomName" label="教室名称" width="180"></el-table-column>
      <el-table-column prop="classroomEquipmentNo" label="设备编号" width="180"></el-table-column>
      <el-table-column prop="classroomEquipmentLocation" label="设备位置" width="180"></el-table-column>
      <el-table-column prop="classroomEquipmentCapacity" label="设备容量" width="180"></el-table-column>
      <el-table-column prop="classroomInstructions" label="使用说明" width="180"></el-table-column>
      <el-table-column prop="remark" label="备注" width="180"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row.classroomEquipmentId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="totalElements"
    ></el-pagination>
    <editClass
      :form="editForm"
      :title="isEdit ? '编辑设备' : '添加设备'"
      :editDialogVisible.sync="editDialogVisible"
      :isEdit="isEdit"
      :formLabelWidth="formLabelWidth"
      @save="handleSave"
    ></editClass>
  </div>
</template>

<script>
import editClass from './editClass.vue';
import axios from 'axios';

export default {
  name: 'ListPage',
  components: {
    editClass
  },
  data() {
    return {
      classroomEquipment: [],
      currentPage: 1,
      pageSize: 5,
      totalElements: 0,
      editDialogVisible: false,
      addForm: {
        classroomName: '',
        classroomEquipmentNo: '',
        classroomEquipmentLocation: '',
        classroomEquipmentCapacity: '',
        classroomInstructions: '',
        remark: '',
		statusFlag:0
      },
      editForm: {
        classroomEquipmentId: '',
        classroomName: '',
        classroomEquipmentNo: '',
        classroomEquipmentLocation: '',
        classroomEquipmentCapacity: '',
        classroomInstructions: '',
        remark: '',
		statusFlag:0
      },
      isEdit: false,
      formLabelWidth: '120px'
    };
  },
  methods: {
    fetchClassroomEquipment(pageNum) {
      axios.get('http://localhost:8080/classroomEquip/queryList', {
        params: {
          pageNumber: pageNum,
          pageSize: this.pageSize
        }
      })
      .then(response => {
        const data = response.data.result;
        this.classroomEquipment = data.Content;
        this.totalElements = data.TotalElements;
      })
      .catch(error => {
        console.error('Error fetching classroom equipment:', error);
        alert("查询有误 请联系管理员");
      });
    },
    handlePageChange(newPage) {
      this.fetchClassroomEquipment(newPage);
    },
    handleAdd() {
      this.editDialogVisible = true;
      this.editForm = { ...this.addForm };
      this.isEdit = false;
    },
    handleEdit(row) {
      this.editDialogVisible = true;
      this.editForm = { ...row };
      this.isEdit = true;
    },
    handleDelete(index, classroomEquipmentId) {
      this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get('http://localhost:8080/classroomEquip/del', {
          params: {
            classroomEquipmentId: classroomEquipmentId
          }
        })
        .then(response => {
          if (response.data.code == 200) {
            this.$message({
              type: 'success',
              message: response.data.message
            });
            this.classroomEquipment.splice(index, 1);
          } else {
            this.$message({
              type: 'error',
              message: response.data.message
            });
          }
        })
        .catch(error => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      });
    },
    handleSave(formData) {
      if (this.isEdit) {
        // 更新操作
        axios.post('http://localhost:8080/classroomEquip/edit', formData)
        .then(response => {
          if (response.data.code === 200) {
            this.$message.success('更新成功');
            this.fetchClassroomEquipment(this.currentPage);
          } else {
            this.$message.error(response.data.message);
          }
        })
        .catch(error => {
          this.$message.error('更新失败');
        });
      } else {
        // 添加操作
        axios.post('http://localhost:8080/classroomEquip/addNew', formData)
        .then(response => {
          if (response.data.code === 200) {
            this.$message.success('添加成功');
            this.fetchClassroomEquipment(1);
          } else {
            this.$message.error(response.data.message);
          }
        })
        .catch(error => {
          this.$message.error('添加失败');
        });
      }
      this.editDialogVisible = false;
    }
  },
  mounted() {
    this.fetchClassroomEquipment(this.currentPage);
  }
};
</script>

<style scoped>
.listPage {
  width: 100%;
  height: 100%;
}
</style>